<template>
  <div class="tool">
    <div class="toolAdd">
      <el-button type="primary" @click="handleAdd">添加</el-button>
    </div>
    <div class="toolRight">
      <el-tooltip content="筛选列" placement="top" effect="dark">
        <el-popover placement="left-start" width="100" trigger="click">
          <el-checkbox-group
            id="myCheckboxGroup"
            v-model="checkedArr"
            @change="handleChange"
          >
            <el-checkbox
              v-for="item in tableColumns"
              :label="item.label"
              :key="item.prop"
              style="display:block;"
            >
              {{ item.label }}
            </el-checkbox>
          </el-checkbox-group>
          <el-button class="btnLie" icon="el-icon-jk-lie" slot="reference">
          </el-button>
        </el-popover>
      </el-tooltip>
      <!-- <el-tooltip content="导出" placement="top" effect="dark">
        <download-excel
          class="downExcel"
          type="xls"
          :data="tableData"
          :fields="tableDataFields"
          :name="fileName"
        >
          <el-button
            class="btnExport"
            icon="el-icon-jk-export"
            @click="handleExport"
          >
          </el-button>
        </download-excel>
      </el-tooltip> -->
    </div>
  </div>
</template>

<script>
export default {
  props:["tableColumns","tableData","tableDataFields","fileName"],
  data(){
    return {
      checkedArr:[],
      changeLie:''
    }
  },
  created(){
    this.initCheckedArr()
  },
  methods: {
    handleAdd() {
      this.$emit('AddItem')
    },
    handleChange(val) {
      this.changeLie = val;
      this.$emit("changeLie", val);
    },
    handleExport() {
      let _data = {
        type: this.selectOpera.value,
      };
      this.$emit("exportData", _data);
    },
    initCheckedArr() {
      this.tableColumns.forEach((element, index) => {
        if (element.isShow) {
          this.checkedArr.push(element.label);
        }
      });
    },
  },
  watch:{
   
  }
};
</script>

<style lang="scss" scoped>
.tool {
  display: flex;
  justify-content: space-between;
  padding: 15px 15px;
  .toolRight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 5px;
  }

}

#myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #606266;
}
#myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #5fb878;
  border-color: #5fb878;
}
#myCheckboxGroup /deep/ .el-checkbox {
  margin-bottom: 8px;
}
</style>
